<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript 日期格式化函数</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #333;
        }

        .container {
            width: 90%;
            max-width: 1000px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            padding: 30px;
            margin-top: 20px;
        }

        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 10px;
            font-size: 32px;
        }

        .description {
            text-align: center;
            color: #7f8c8d;
            margin-bottom: 30px;
            font-size: 16px;
        }

        .demo-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }

        @media (max-width: 768px) {
            .demo-section {
                grid-template-columns: 1fr;
            }
        }

        .input-panel,
        .output-panel {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .panel-title {
            font-size: 18px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .input-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }

        input,
        select,
        textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        input:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #3498db;
        }

        textarea {
            min-height: 120px;
            font-family: 'Consolas', 'Monaco', monospace;
            resize: vertical;
        }

        .format-examples {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
            margin-top: 15px;
        }

        .format-example {
            padding: 8px 12px;
            background: #e8f4fc;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .format-example:hover {
            background: #3498db;
            color: white;
        }

        .output-content {
            background: #2d3436;
            color: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 14px;
            line-height: 1.5;
            min-height: 120px;
            overflow-x: auto;
            white-space: pre-wrap;
        }

        .code-section {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }

        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .code-header h2 {
            color: #2c3e50;
            font-size: 20px;
        }

        .code-block {
            background: #2d3436;
            color: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 14px;
            line-height: 1.5;
        }

        .copy-btn {
            padding: 8px 16px;
            background: #2c3e50;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .copy-btn:hover {
            background: #1a252f;
        }

        .token.comment {
            color: #6c757d;
        }

        .token.keyword {
            color: #ff6b6b;
        }

        .token.function {
            color: #51cf66;
        }

        .token.string {
            color: #f9ca24;
        }

        .token.number {
            color: #9980fa;
        }

        .token.operator {
            color: #74b9ff;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>TypeScript 日期格式化函数</h1>
        <p class="description">实现灵活的日期格式化功能，支持多种格式选项</p>

        <div class="demo-section">
            <div class="input-panel">
                <div class="panel-title">
                    <i class="fas fa-cog"></i> 输入设置
                </div>

                <div class="input-group">
                    <label for="dateInput">日期</label>
                    <input type="datetime-local" id="dateInput" value="">
                </div>

                <div class="input-group">
                    <label for="formatInput">格式字符串</label>
                    <input type="text" id="formatInput" value="yyyy-MM-dd HH:mm:ss">
                    <div class="format-examples">
                        <div class="format-example" data-format="yyyy-MM-dd">yyyy-MM-dd</div>
                        <div class="format-example" data-format="dd/MM/yyyy">dd/MM/yyyy</div>
                        <div class="format-example" data-format="MMM d, yyyy">MMM d, yyyy</div>
                        <div class="format-example" data-format="h:mm tt">h:mm tt</div>
                        <div class="format-example" data-format="yyyy年MM月dd日 HH时mm分">yyyy年MM月dd日 HH时mm分</div>
                    </div>
                </div>

                <div class="input-group">
                    <label for="localeSelect">区域设置</label>
                    <select id="localeSelect">
                        <option value="zh-CN">中文 (中国)</option>
                        <option value="en-US">English (US)</option>
                        <option value="en-GB">English (UK)</option>
                        <option value="ja-JP">日本語</option>
                        <option value="ko-KR">한국어</option>
                    </select>
                </div>
            </div>

            <div class="output-panel">
                <div class="panel-title">
                    <i class="fas fa-code"></i> 格式化结果
                </div>
                <div class="output-content" id="outputResult">
                    // 结果将在这里显示
                </div>

                <div class="panel-title" style="margin-top: 20px;">
                    <i class="fas fa-info-circle"></i> 格式说明
                </div>
                <div class="output-content">
                    yyyy: 四位数的年份
                    yy: 两位数的年份
                    MM: 两位数的月份（01-12）
                    M: 月份（1-12）
                    dd: 两位数的日期（01-31）
                    d: 日期（1-31）
                    HH: 24小时制的小时（00-23）
                    H: 24小时制的小时（0-23）
                    hh: 12小时制的小时（01-12）
                    h: 12小时制的小时（1-12）
                    mm: 分钟（00-59）
                    m: 分钟（0-59）
                    ss: 秒（00-59）
                    s: 秒（0-59）
                    SSS: 毫秒（000-999）
                    tt: 上午/下午（大写）
                    TT: 上午/下午（大写，与tt相同）
                    t: 上午/下午（缩写）
                    T: 上午/下午（缩写，大写）
                </div>
            </div>
        </div>

        <div class="code-section">
            <div class="code-header">
                <h2>TypeScript 实现代码</h2>
                <button class="copy-btn" id="copyCodeBtn">
                    <i class="fas fa-copy"></i> 复制代码
                </button>
            </div>
            <div class="code-block">
                <pre><span class="token comment">
                    /**
 * 日期格式化函数
 * @param date 日期对象或日期字符串
 * @param format 格式字符串
 * @param locale 区域设置，默认为 'zh-CN'
 * @returns 格式化后的日期字符串
 */
</span>
<span class="token keyword">function</span> <span class="token function">formatDate</span><span class="token operator">(</span>
  date<span class="token operator">:</span> Date <span class="token operator">|</span> string <span class="token operator">|</span> number<span class="token punctuation">,</span>
  format<span class="token operator">:</span> string <span class="token operator">=</span> <span class="token string">'yyyy-MM-dd HH:mm:ss'</span><span class="token punctuation">,</span>
  locale<span class="token operator">:</span> string <span class="token operator">=</span> <span class="token string">'zh-CN'</span>
<span class="token punctuation">)</span><span class="token operator">:</span> string <span class="token punctuation">{</span>
  <span class="token comment">// 确保date是Date对象</span>
  <span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span><span class="token punctuation">;</span>
  
  <span class="token comment">// 验证日期有效性</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isNaN</span><span class="token punctuation">(</span>d<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Invalid date'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  
  <span class="token comment">// 定义格式化选项</span>
  <span class="token keyword">const</span> options<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>key<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> string <span class="token operator">|</span> number <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token string">'y+'</span><span class="token operator">:</span> d<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 年份</span>
    <span class="token string">'M+'</span><span class="token operator">:</span> d<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// 月份</span>
    <span class="token string">'d+'</span><span class="token operator">:</span> d<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 日</span>
    <span class="token string">'H+'</span><span class="token operator">:</span> d<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 小时（24小时制）</span>
    <span class="token string">'m+'</span><span class="token operator">:</span> d<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 分</span>
    <span class="token string">'s+'</span><span class="token operator">:</span> d<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 秒</span>
    <span class="token string">'S+'</span><span class="token operator">:</span> d<span class="token punctuation">.</span><span class="token function">getMilliseconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 毫秒</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  
  <span class="token comment">// 处理上午/下午</span>
  <span class="token keyword">let</span> hour <span class="token operator">=</span> d<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> isPM <span class="token operator">=</span> hour <span class="token operator">>=</span> <span class="token number">12</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> amPm<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>key<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> string <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token string">'zh-CN'</span><span class="token operator">:</span> <span class="token punctuation">{</span> tt<span class="token operator">:</span> <span class="token string">'上午'</span><span class="token punctuation">,</span> TT<span class="token operator">:</span> <span class="token string">'上午'</span><span class="token punctuation">,</span> t<span class="token operator">:</span> <span class="token string">'上'</span><span class="token punctuation">,</span> T<span class="token operator">:</span> <span class="token string">'上'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token string">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">{</span> tt<span class="token operator">:</span> <span class="token string">'AM'</span><span class="token punctuation">,</span> TT<span class="token operator">:</span> <span class="token string">'AM'</span><span class="token punctuation">,</span> t<span class="token operator">:</span> <span class="token string">'A'</span><span class="token punctuation">,</span> T<span class="token operator">:</span> <span class="token string">'A'</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  
  <span class="token keyword">if</span> <span class="token punctuation">(</span>isPM<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    amPm<span class="token punctuation">[</span><span class="token string">'zh-CN'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">{</span> tt<span class="token operator">:</span> <span class="token string">'下午'</span><span class="token punctuation">,</span> TT<span class="token operator">:</span> <span class="token string">'下午'</span><span class="token punctuation">,</span> t<span class="token operator">:</span> <span class="token string">'下'</span><span class="token punctuation">,</span> T<span class="token operator">:</span> <span class="token string">'下'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
    amPm<span class="token punctuation">[</span><span class="token string">'en-US'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">{</span> tt<span class="token operator">:</span> <span class="token string">'PM'</span><span class="token punctuation">,</span> TT<span class="token operator">:</span> <span class="token string">'PM'</span><span class="token punctuation">,</span> t<span class="token operator">:</span> <span class="token string">'P'</span><span class="token punctuation">,</span> T<span class="token operator">:</span> <span class="token string">'P'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token comment">// 转换为12小时制</span>
    hour <span class="token operator">=</span> hour <span class="token operator">%</span> <span class="token number">12</span> <span class="token operator">||</span> <span class="token number">12</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  
  options<span class="token punctuation">[</span><span class="token string">'h+'</span><span class="token punctuation">]</span> <span class="token operator">=</span> hour<span class="token punctuation">;</span> <span class="token comment">// 12小时制的小时</span>
  
  <span class="token comment">// 替换格式化字符串中的占位符</span>
  <span class="token keyword">let</span> formatted <span class="token operator">=</span> format<span class="token punctuation">;</span>
  
  <span class="token comment">// 首先处理上午/下午标记</span>
  formatted <span class="token operator">=</span> formatted<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/(tt|TT|t|T)/g</span><span class="token punctuation">,</span> match <span class="token operator">=></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> localeAmPm <span class="token operator">=</span> amPm<span class="token punctuation">[</span>locale<span class="token punctuation">]</span> <span class="token operator">||</span> amPm<span class="token punctuation">[</span><span class="token string">'en-US'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> localeAmPm<span class="token punctuation">[</span>match<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  
  <span class="token comment">// 处理其他格式化标记</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> key <span class="token keyword">in</span> options<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> regex <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token string">'g'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    formatted <span class="token operator">=</span> formatted<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>regex<span class="token punctuation">,</span> match <span class="token operator">=></span> <span class="token punctuation">{</span>
      <span class="token comment">// 获取原始值</span>
      <span class="token keyword">let</span> value <span class="token operator">=</span> options<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">// 如果占位符长度大于1，需要补零</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>match<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">1</span> <span class="token operator">&amp;&amp;</span> value<span class="token punctuation">.</span>length <span class="token operator">&lt;</span> match<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> value<span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span>match<span class="token punctuation">.</span>length<span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> value<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  
  <span class="token comment">// 处理月份名称缩写（MMM）和全名（MMMM）</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>formatted<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'MMM'</span><span class="token punctuation">)</span> <span class="token operator">||</span> formatted<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'MMMM'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> month <span class="token operator">=</span> d<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> monthNames<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>key<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> string<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
      <span class="token string">'zh-CN'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1月'</span><span class="token punctuation">,</span> <span class="token string">'2月'</span><span class="token punctuation">,</span> <span class="token string">'3月'</span><span class="token punctuation">,</span> <span class="token string">'4月'</span><span class="token punctuation">,</span> <span class="token string">'5月'</span><span class="token punctuation">,</span> <span class="token string">'6月'</span><span class="token punctuation">,</span> <span class="token string">'7月'</span><span class="token punctuation">,</span> <span class="token string">'8月'</span><span class="token punctuation">,</span> <span class="token string">'9月'</span><span class="token punctuation">,</span> <span class="token string">'10月'</span><span class="token punctuation">,</span> <span class="token string">'11月'</span><span class="token punctuation">,</span> <span class="token string">'12月'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Jan'</span><span class="token punctuation">,</span> <span class="token string">'Feb'</span><span class="token punctuation">,</span> <span class="token string">'Mar'</span><span class="token punctuation">,</span> <span class="token string">'Apr'</span><span class="token punctuation">,</span> <span class="token string">'May'</span><span class="token punctuation">,</span> <span class="token string">'Jun'</span><span class="token punctuation">,</span> <span class="token string">'Jul'</span><span class="token punctuation">,</span> <span class="token string">'Aug'</span><span class="token punctuation">,</span> <span class="token string">'Sep'</span><span class="token punctuation">,</span> <span class="token string">'Oct'</span><span class="token punctuation">,</span> <span class="token string">'Nov'</span><span class="token punctuation">,</span> <span class="token string">'Dec'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    
    <span class="token keyword">const</span> fullMonthNames<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>key<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> string<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
      <span class="token string">'zh-CN'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'一月'</span><span class="token punctuation">,</span> <span class="token string">'二月'</span><span class="token punctuation">,</span> <span class="token string">'三月'</span><span class="token punctuation">,</span> <span class="token string">'四月'</span><span class="token punctuation">,</span> <span class="token string">'五月'</span><span class="token punctuation">,</span> <span class="token string">'六月'</span><span class="token punctuation">,</span> <span class="token string">'七月'</span><span class="token punctuation">,</span> <span class="token string">'八月'</span><span class="token punctuation">,</span> <span class="token string">'九月'</span><span class="token punctuation">,</span> <span class="token string">'十月'</span><span class="token punctuation">,</span> <span class="token string">'十一月'</span><span class="token punctuation">,</span> <span class="token string">'十二月'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'January'</span><span class="token punctuation">,</span> <span class="token string">'February'</span><span class="token punctuation">,</span> <span class="token string">'March'</span><span class="token punctuation">,</span> <span class="token string">'April'</span><span class="token punctuation">,</span> <span class="token string">'May'</span><span class="token punctuation">,</span> <span class="token string">'June'</span><span class="token punctuation">,</span> <span class="token string">'July'</span><span class="token punctuation">,</span> <span class="token string">'August'</span><span class="token punctuation">,</span> <span class="token string">'September'</span><span class="token punctuation">,</span> <span class="token string">'October'</span><span class="token punctuation">,</span> <span class="token string">'November'</span><span class="token punctuation">,</span> <span class="token string">'December'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    
    <span class="token keyword">const</span> localeMonthNames <span class="token operator">=</span> monthNames<span class="token punctuation">[</span>locale<span class="token punctuation">]</span> <span class="token operator">||</span> monthNames<span class="token punctuation">[</span><span class="token string">'en-US'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> localeFullMonthNames <span class="token operator">=</span> fullMonthNames<span class="token punctuation">[</span>locale<span class="token punctuation">]</span> <span class="token operator">||</span> fullMonthNames<span class="token punctuation">[</span><span class="token string">'en-US'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    
    formatted <span class="token operator">=</span> formatted<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/MMMM/g</span><span class="token punctuation">,</span> localeFullMonthNames<span class="token punctuation">[</span>month<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    formatted <span class="token operator">=</span> formatted<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/MMM/g</span><span class="token punctuation">,</span> localeMonthNames<span class="token punctuation">[</span>month<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  
  <span class="token keyword">return</span> formatted<span class="token punctuation">;</span>
<span class="token punctuation">}</span></pre>
            </div>
        </div>
    </div>

    <script>
        // 设置默认日期为当前时间
        const now = new Date();
        const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
        document.getElementById('dateInput').value = localDateTime;

        // TypeScript 日期格式化函数实现
        function formatDate(date, format = 'yyyy-MM-dd HH:mm:ss', locale = 'zh-CN') {
            const d = new Date(date);

            if (isNaN(d.getTime())) {
                throw new Error('Invalid date');
            }

            const options = {
                'y+': d.getFullYear(),
                'M+': d.getMonth() + 1,
                'd+': d.getDate(),
                'H+': d.getHours(),
                'm+': d.getMinutes(),
                's+': d.getSeconds(),
                'S+': d.getMilliseconds()
            };

            let hour = d.getHours();
            const isPM = hour >= 12;
            const amPm = {
                'zh-CN': { tt: '上午', TT: '上午', t: '上', T: '上' },
                'en-US': { tt: 'AM', TT: 'AM', t: 'A', T: 'A' }
            };

            if (isPM) {
                amPm['zh-CN'] = { tt: '下午', TT: '下午', t: '下', T: '下' };
                amPm['en-US'] = { tt: 'PM', TT: 'PM', t: 'P', T: 'P' };
                hour = hour % 12 || 12;
            }

            options['h+'] = hour;

            let formatted = format;

            formatted = formatted.replace(/(tt|TT|t|T)/g, match => {
                const localeAmPm = amPm[locale] || amPm['en-US'];
                return localeAmPm[match] || '';
            });

            for (const key in options) {
                const regex = new RegExp(`(${key})`, 'g');
                formatted = formatted.replace(regex, match => {
                    let value = options[key].toString();
                    if (match.length > 1 && value.length < match.length) {
                        return value.padStart(match.length, '0');
                    }
                    return value;
                });
            }

            if (formatted.includes('MMM') || formatted.includes('MMMM')) {
                const month = d.getMonth();
                const monthNames = {
                    'zh-CN': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    'en-US': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                };

                const fullMonthNames = {
                    'zh-CN': ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    'en-US': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
                };

                const localeMonthNames = monthNames[locale] || monthNames['en-US'];
                const localeFullMonthNames = fullMonthNames[locale] || fullMonthNames['en-US'];

                formatted = formatted.replace(/MMMM/g, localeFullMonthNames[month]);
                formatted = formatted.replace(/MMM/g, localeMonthNames[month]);
            }

            return formatted;
        }

        // 更新结果显示
        function updateResult() {
            try {
                const dateInput = document.getElementById('dateInput').value;
                const formatInput = document.getElementById('formatInput').value;
                const localeSelect = document.getElementById('localeSelect').value;

                const formattedDate = formatDate(dateInput, formatInput, localeSelect);
                document.getElementById('outputResult').textContent = formattedDate;
            } catch (error) {
                document.getElementById('outputResult').textContent = `错误: ${error.message}`;
            }
        }

        // 添加事件监听器
        document.getElementById('dateInput').addEventListener('change', updateResult);
        document.getElementById('dateInput').addEventListener('input', updateResult);
        document.getElementById('formatInput').addEventListener('input', updateResult);
        document.getElementById('localeSelect').addEventListener('change', updateResult);

        // 格式示例点击事件
        document.querySelectorAll('.format-example').forEach(example => {
            example.addEventListener('click', function () {
                document.getElementById('formatInput').value = this.getAttribute('data-format');
                updateResult();
            });
        });

        // 复制代码功能
        document.getElementById('copyCodeBtn').addEventListener('click', function () {
            const codeBlock = document.querySelector('.code-block pre').textContent;
            navigator.clipboard.writeText(codeBlock).then(() => {
                const originalText = this.innerHTML;
                this.innerHTML = '<i class="fas fa-check"></i> 已复制';

                setTimeout(() => {
                    this.innerHTML = originalText;
                }, 2000);
            }).catch(err => {
                console.error('复制失败:', err);
                alert('复制失败，请手动选择复制代码');
            });
        });

        // 初始更新
        updateResult();
    </script>
</body>

</html>